/**
 * 公共样式
 * 补充一些colorUI没有但是设计图常用的样式
 * 一些兼容性样式等
 */

page {
    background: #F8F8F8;
    min-height: 100%;
}

[v-cloak] {
    display: none;
}

.text-333 {
    color: #333333;
}

.text-666 {
    color: #666666;
}

.text-999 {
    color: #999999;
}

.text-bf {
    color: #BFBFBF;
}

.text-prices {
	color: #FA2033;
}

.text-through {
    text-decoration: line-through;
}

.text-weight-400 {
    font-weight: 400;
}

.text-weight-500 {
    font-weight: 500;
}

.text-weight-600 {
    font-weight: 600;
}

.text-weight-700 {
    font-weight: 700;
}

.text-cut-2,
.text-cut-3,
.text-cut-4,
.text-cut-5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.text-cut-2 {
    -webkit-line-clamp: 2;
}

.text-cut-3 {
    -webkit-line-clamp: 3;
}

.text-cut-4 {
    -webkit-line-clamp: 4;
}

.text-cut-5 {
    -webkit-line-clamp: 5;
}

.height-88 {
    height: 88rpx;
}

.height-100 {
    height: 100rpx;
}

.safeArea-bottom {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.bg-theme {
    background: $bgtheme;
}
.bg-theme1 {
    background: $bgtheme1;
}
.bg-f8 {
	background: #F8F8F8;
}
.text-theme{
    color: $theme!important;
}
.vecode{
	color: $codeColor;
}
 .line-eee{
	 border: 1px solid #EEEEEE;
 }
 .line-999{
	 color: #999;
	 border: 1px solid #999;
 }
 .line-333{
 	 color: #333;
 	 border: 1px solid #333;
 }
 .line-f8{
	 border: 1px solid #f8f8f8;
 }
 .bg-themeOp{
	 background: rgba($theme, 0.2);
 }
.line-theme,
.lines-theme {
	color: $theme!important;
    border:1px solid $theme!important;
}

.overHidden {
    overflow: hidden;
}

.word-break-all {
    word-break: break-all;
}

.placeholderClass {
    font-size: 32rpx;
    color: #BFBFBF;
}

.checkboxScale {
    transform: scale(0.65);
}

switch.theme[checked] .wx-switch-input,
checkbox.theme[checked] .wx-checkbox-input,
radio.theme[checked] .wx-radio-input,
switch.theme.checked .uni-switch-input,
checkbox.theme.checked .uni-checkbox-input,
radio.theme.checked .uni-radio-input {
    background: $theme!important;
    border-color: $theme!important;
    color: #ffffff!important;
}

uni-switch.green[checked] .wx-switch-input,
uni-checkbox.green[checked] .wx-checkbox-input,
uni-checkbox[checked] .wx-checkbox-input,
uni-radio.green[checked] .wx-radio-input,
uni-switch.green.checked .uni-switch-input,
uni-switch.checked .uni-switch-input,
uni-checkbox.green.checked .uni-checkbox-input,
uni-checkbox.checked .uni-checkbox-input,
uni-radio.green.checked .uni-radio-input,
uni-radio.checked .uni-radio-input {
    background-color: $theme !important;
    color: #ffffff !important;
    border-color: $theme !important;
}

uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
    border-color: $theme !important;
}
switch.red[checked] .wx-switch-input.wx-switch-input-checked,
checkbox.red[checked] .wx-checkbox-input,
radio.red[checked] .wx-radio-input,
switch.red.checked .uni-switch-input.uni-switch-input-checked,
checkbox.red.checked .uni-checkbox-input,
radio.red.checked .uni-radio-input {
  background-color: $theme !important;
  border-color: $theme !important;
  color: #ffffff !important;
}
switch.olive[checked] .wx-switch-input,
checkbox.olive[checked] .wx-checkbox-input,
radio.olive[checked] .wx-radio-input,
switch.olive.checked .uni-switch-input,
checkbox.olive.checked .uni-checkbox-input,
radio.olive.checked .uni-radio-input {
  background-color: $theme !important;
  border-color: $theme !important;
  color: #ffffff !important;
}

switch.green[checked] .wx-switch-input,
/* switch[checked] .wx-switch-input, */
checkbox.green[checked] .wx-checkbox-input,
checkbox[checked] .wx-checkbox-input,
radio.green[checked] .wx-radio-input,
/* radio[checked] .wx-radio-input, */
switch.green.checked .uni-switch-input,
switch.checked .uni-switch-input,
checkbox.green.checked .uni-checkbox-input,
checkbox.checked .uni-checkbox-input,
radio.green.checked .uni-radio-input,
radio.checked .uni-radio-input {
  background-color: $theme !important;
  border-color: $theme !important;
  color: #ffffff !important;
  border-color: $theme !important;
}
// w-picker 加圆角
.w-picker .w-picker-cnt.visible {
    border-radius: 16rpx 16rpx 0px 0px !important;
    overflow: hidden!important;
}

// w-picker 标题栏高度
.w-picker .w-picker-header {
    height: 100rpx!important;
}

// w-picker 去掉山下边框线
.uni-picker-view-indicator::before {
    border-top: 1px solid transparent;
}

.uni-picker-view-indicator:after {
    border-bottom: 1px solid transparent;
}
uni-modal .uni-modal__bd{
    color: #333!important;
  }
.title-block {
	&:before {
		display: block;
		content: ' ';
		width: 7rpx;
		height: 30rpx;
		background: $bgtheme;
		margin-right: 15rpx;
	}
}
@for $i from 20 through 750 {
  .fu-block-#{$i} {
    width: #{$i}rpx!important;
		height: #{$i}rpx!important;
  }
}
@for $i from 20 through 100 {
  .fu-fs#{$i} {
    font-size: #{$i}rpx!important;
  }
}
@for $i from 4 through 150 {
  .radius-#{$i} {
    border-radius: #{$i}rpx!important;
  }
}
@for $i from 2 through 750 {
  .width-#{$i} {
    width: #{$i}rpx!important;
  }
}
@for $i from 2 through 1000 {
  .height-#{$i} {
    height: #{$i}rpx!important;
  }
}
@for $i from 2 through 1000 {
  .line-height-#{$i} {
		line-height: #{$i}rpx!important;
  }
}

@for $i from 2 through 300 {
  .padding-top-#{$i} {
    padding-top: #{$i}rpx!important;
  }
}
@for $i from 2 through 300 {
  .padding-bottom-#{$i} {
    padding-bottom: #{$i}rpx!important;
  }
}
@for $i from 2 through 300 {
  .padding-left-#{$i} {
    padding-left: #{$i}rpx!important;
  }
}
@for $i from 2 through 300 {
  .padding-right-#{$i} {
    padding-right: #{$i}rpx!important;
  }
}
@for $i from 2 through 300 {
  .padding-tb-#{$i} {
   padding-top: #{$i}rpx!important ;
   padding-bottom: #{$i}rpx!important ;
  }
}
@for $i from 2 through 300 {
  .padding-lr-#{$i} {
    padding-left: #{$i}rpx!important ;
    padding-right: #{$i}rpx!important ;
  }
}
@for $i from 2 through 300 {
  .padding-#{$i} {
    padding:#{$i}rpx!important;
  }
}
@for $i from 2 through 300 {
  .margin-#{$i} {
    margin:#{$i}rpx!important;
  }
}
@for $i from 2 through 300 {
  .margin-top-#{$i} {
    margin-top: #{$i}rpx!important;
  }
}
@for $i from 2 through 300 {
  .margin-bottom-#{$i} {
    margin-bottom: #{$i}rpx!important;
  }
}
@for $i from 2 through 300 {
  .margin-left-#{$i} {
    margin-left: #{$i}rpx!important;
  }
}
@for $i from 2 through 300 {
  .margin-right-#{$i} {
    margin-right: #{$i}rpx!important;
  }
}
@for $i from 2 through 300 {
  .margin-tb-#{$i} {
   margin-top: #{$i}rpx!important ;
   margin-bottom: #{$i}rpx!important ;
  }
}
@for $i from 2 through 300 {
  .margin-lr-#{$i} {
		margin-left: #{$i}rpx!important ;
		margin-right: #{$i}rpx!important ;
  }
}
@for $i from 2 through 500 {
  .height#{$i} {
    height: #{$i}rpx !important;
  }
}

 @for $i from 2 through 100 {
   .w#{$i} {		
      width: 1% * $i;
   }
 }
.bg-f8{
	background-color: #f8f8f8;
}
.flex-shrink{
	flex-shrink: 0;
}
.relative{
	position: relative;
}